<template>
	<view class="goods-detail-container">

		<!-- 商品详情 -->
		<view class="goods-detail" v-if="Object.keys(goodsDetail).length > 0">
			<swiper class="swiper-box" :indicator-dots="true" :autoplay="true" :circular="true"
				@change="handleSwiperItemChange">
				<swiper-item v-for="(item, index) in goodsDetail.goods_images" :key="index">
					<view class="slide-image">
						<image class="image" mode="widthFix" :src="item.preview_url" />
					</view>
				</swiper-item>
			</swiper>
			<view class="swiper-count">
				<text>{{ currentIndex }}</text>
				<text>/</text>
				<text>{{ goodsDetail.goods_images.length }}</text>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="goods-action">
			<view class="add-to-cart" @click="handlePopup">
				加入购物车
			</view>
		</view>

		<!-- 弹出层 -->
		<view class="popup-container" v-if="popupVisible">
			<view class="mask" @click="handleMask">
			</view>
			<view class="popup">
				<view class="add-button">
					加入购物车
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import request from '@/utils/request';

	export default {
		data() {
			return {
				// 商品Id
				goodsId: null,
				// 商品详情
				goodsDetail: {},
				// 购物车中商品数量
				cartTotal: 0,
				// 轮播图索引
				currentIndex: 1,
				// 弹窗UI
				popupVisible: false
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			console.log('详情页', options);
			this.goodsId = options.goodsId;
			this.getDetailAndCartTotal();
		},

		methods: {
			async getDetailAndCartTotal() {
				const res = await Promise.all([
					request.get('goods/detail', {
						goodsId: this.goodsId
					}),
					request.get('cart/total'),
				]);
				console.log('详情和购物车数量', res);
				this.goodsDetail = res[0].data.detail;
				this.cartTotal = res[1].data.cartTotal;
			},

			handleSwiperItemChange(item) {
				// console.log(item);
				this.currentIndex = item.detail.current + 1;
			},

			handlePopup() {
				this.popupVisible = !this.popupVisible
			},
			handleMask() {
				this.popupVisible = false
			}
		},
	};
</script>

<style lang="scss" scoped>
	.goods-detail-container {

		// 商品详情
		.goods-detail {
			position: relative;

			.swiper-box {
				height: 300px;

				.image {
					width: 100%;
				}
			}

			.swiper-count {
				position: absolute;
				top: 250px;
				right: 30px;
				background-color: gray;
				color: white;
				border-radius: 16px;
				padding: 0 8px;
			}
		}

		// 底部操作栏
		.goods-action {
			position: fixed;
			width: 100%;
			height: 50px;
			bottom: 0;
			background-color: pink;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.add-to-cart {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 38rpx;
				width: 120px;
				height: 34px;
				color: white;
				background-color: red;
				margin-right: 16px;
				background: linear-gradient(to right, #ffa600, #ffbb00);
			}
		}

		// 弹出层
		.popup-container {
			.mask {
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
				height: 100%;
				z-index: 1;
				background-color: rgba(0, 0, 0, 0.65);
				animation: showMask 0.5s linear both;
			}

			.popup {
				position: fixed;
				width: 100%;
				height: 300rpx;
				z-index: 10;
				bottom: 0;
				background-color: white;
				display: flex;
				justify-content: center;
				align-items: end;
				animation: showPopup 0.5s linear both;

				.add-button {
					background-color: lightcoral;
					padding: 8px 16px;
				}
			}

			@keyframes showMask {
				0% {
					opacity: 0;
				}

				100% {
					opacity: 1;
				}
			}

			@keyframes showPopup {
				0% {
					transform: translateY(120%);
				}

				100% {
					transform: translateY(0%);
				}
			}
		}

	}
</style>